<template>
  <!-- Conflict prompt pop-up, use fixed positioning to center at the top of the page -->
  <div class="fixed top-4 left-1/2 -translate-x-1/2 z-50 w-full max-w-md bg-red-50 border border-red-200 rounded-lg shadow-lg overflow-hidden transform transition-all duration-300">
    <!-- Title Bar -->
    <div class="bg-red-100 px-4 py-3 flex justify-between items-center">
      <h3 class="font-semibold text-red-800">⚠️ 课程时间冲突</h3>
      <!-- Close button -->
      <button 
        @click="handleClose" 
        class="text-red-500 hover:text-red-700 transition-colors"
        aria-label="Close prompt"
      >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>
    
    <!-- Conflict Details -->
    <div class="p-4">
      <p class="text-red-700 mb-3">The course you added overlaps with the existing course schedule：</p>
      
      <!-- Conflict course list (supports multiple conflicts) -->
      <div class="space-y-2 mb-4">
        <div v-for="(course, index) in conflictCourses" :key="index" class="bg-white p-3 rounded border border-red-100">
          <p><span class="font-medium">Course Name：</span>{{ course.name }}</p>
          <p><span class="font-medium">Time：</span>{{ getWeekDay(course.weekday) }} {{ course.startTime }} - {{ course.endTime }}</p>
          <p><span class="font-medium">Teacher：</span>{{ course.teacher }}</p>
        </div>
      </div>
      
      <!-- Operational Recommendations -->
      <p class="text-sm text-red-600">Please modify the course schedule or choose another course.</p>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

// Receive conflicting course data passed by the parent component
const props = defineProps({
  // Conflict course array (supports multiple conflicts)
  conflictCourses: {
    type: Array,
    required: true,
    // Fields that should be included in each course
    validator: (value) => {
      return value.every(course => 
        course.name && course.weekday !== undefined && 
        course.startTime && course.endTime && course.teacher
      );
    }
  }
});

// Define a shutdown event to notify the parent component to hide prompts
const emit = defineEmits(['close']);
const handleClose = () => {
  emit('close');
};

// Auxiliary function: Convert week numbers (0-4) to Chinese (Monday to Friday)
const getWeekDay = (weekday) => {
  const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];
  return days[weekday] || 'Unknown';
};
</script>

<style scoped>
/* Animation effect: fade in*/
@keyframes fadeIn {
  from { opacity: 0; transform: translate(-50%, -20px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* Application animation */
div {
  animation: fadeIn 0.3s ease-out forwards;
}
</style>
